<template>
	<div class="page flex-column">
		<van-nav-bar title="定金" left-arrow @click-left="goBack" />
		<div class="page-body">
			<el-form ref="form" label-position="top" :model="form" :rules="rules">
				<el-form-item label="收取日期" prop="pay_date">
					<cus-time
						v-model="form.pay_date"
						type="date"
						placeholder="选择日期"
						style="width: 100%"
						:picker-options="pickerOptions"
					/>
				</el-form-item>
				<el-form-item label="品牌" prop="bra_id">
					<cus-select
						v-model="form.bra_id"
						placeholder="请选择品牌"
						:list="brandList"
						label="bra_name"
						prop="bra_id"
					/>
				</el-form-item>
				<el-form-item label="所属门店" prop="dept_id">
					<!-- <cus-select
						placeholder="请选择所属门店"
						:list="shopList"
						label="dept_name"
						prop="dept_id"
						v-model="form.dept_id"
					>
					</cus-select> -->
					<choice-shop
						placeholder="请选择所属门店"
						:biz_id="form.biz_id"
						v-model="form.dept_id"
					/>
				</el-form-item>
				<el-form-item label="转账方式" prop="pay_type">
					<cus-select
						v-model="form.pay_type"
						placeholder="请选择转账方式"
						:list="payTypeList"
						label="label"
						prop="value"
						:type="true"
					>
					</cus-select>
				</el-form-item>
				<el-form-item label="收取金额" prop="dep_amount">
					<cus-select
						v-model="form.dep_amount"
						placeholder="请选择收取金额"
						:list="depositConfigs"
						label="deposit"
						prop="deposit"
						:type="true"
					>
					</cus-select>
				</el-form-item>
				<el-form-item label="参与结算" prop="is_join_settlement" required>
					<el-radio-group v-model="form.is_join_settlement">
						<el-radio :label="0">不参与结算</el-radio>
						<el-radio :label="1">参与结算</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="定金备注" prop="dep_meno">
					<div class="item-con">
						<el-input
							v-model="form.dep_meno"
							placeholder="请填定金备注"
							type="textarea"
							:rows="3"
						/>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="submit">
			<el-button type="primary" :disabled="loading" :loading="saving" @click="submit">
				提交
			</el-button>
		</div>
	</div>
</template>
<script>
import { NavBar } from "vant";
import dayjs from "dayjs";
import constant from "@/constant";
import CusSelect from "./components/cus-select";
import CusTime from "./components/cus-time";
import ChoiceShop from "./components/choice-shop";

export default {
	name: "MobileCusDeposit",
	components: {
		VanNavBar: NavBar,
		CusSelect,
		CusTime,
		ChoiceShop
	},
	data() {
		return {
			pickerOptions: {
				disabledDate(time) {
					let now = dayjs();
					let date = dayjs(time);
					return date.isBefore(now.subtract(2, "day")) || date.isAfter(now);
				}
			},
			payTypeList: constant.PAY_TYPE,
			depositConfigs: [],
			brandList: [],
			detail: {},
			form: {
				dep_id: undefined,
				bra_id: "",
				pay_date: dayjs().format("YYYY-MM-DD"),
				pay_type: "",
				dep_amount: "",
				dep_meno: "",
				is_join_settlement: 0,
				dept_id: ""
			},
			rules: {
				bra_id: [{ required: true, message: "请选择预约品牌" }],
				pay_date: [{ required: true, message: "请选择收取日期", trigger: "change" }],
				pay_type: [{ required: true, message: "请选择转账方式", trigger: "change" }],
				dep_amount: [{ required: true, message: "请选择收取金额", trigger: "change" }],
				dept_id: [{ required: true, message: "请选择所属门店", trigger: "change" }]
			},
			loading: false,
			saving: false,
			editing: false,
			fromPage: ""
		};
	},
	created() {
		this.init();
	},
	methods: {
		async init() {
			const { query } = this.$route;
			this.fromPage = query.from_page;
			this.detail = { ...query };
			this.getInfo(query.form_type == "edit", this.detail);

			this.brandList = await this.$store.dispatch("common/getBizBrands", {
				biz_id: this.getCurrBiz(),
				needAll: false
			});
		},
		getInfo(editing, data) {
			this.editing = editing;
			this.getDepositConfigs();
			this.form.biz_id = data.biz_id;
			if (editing) {
				Object.keys(this.form).forEach(k => {
					this.form[k] = data[k] ?? "";
				});
				this.form.dep_id = data.id;
				this.form.dep_amount = data.dep_amount * 1;
			} else {
				this.form.dept_id = data.dept_id;
			}
			// console.log(this.form.pay_type);
		},
		reset() {
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { cus_id, biz_id } = this.detail;
				const { dep_amount, ...args } = this.form;
				let form = {
					...args,
					cus_id,
					biz_id,
					dep_amount
				};
				let deposit = this.depositConfigs.find(v => v.deposit == dep_amount);
				form.deposit_num = deposit.deposit_num;
				this.saving = true;
				await this.$service.deposit[this.editing ? "edit" : "add"](form).done(() => {
					this.saving = false;
				});
				this.$message.success(this.editing ? "修改成功" : "下定成功");
				if (this.fromPage !== "MobileCusDetail") {
					this.$router.replace({
						path: "/mobile/cus/detail",
						query: {
							...this.detail,
							tabbar: "deposit"
						}
					});
					// this.$emit("haveYy");
					return;
				}
				this.goBack();
			});
		},
		async getDepositConfigs() {
			const { biz_id } = this.detail;
			const data = await this.$service.deposit.configlists({ biz_id });
			this.depositConfigs = data;
		},

		// 后退
		goBack() {
			this.$router.go(-1);
		}
	}
};
</script>
<style lang="scss" scoped>
.page {
	height: 100vh;
	overflow: hidden;
	background: #fff;
	&-body {
		position: relative;
		flex: 1;
		overflow: auto;
		box-sizing: border-box;
		padding: 0.3rem 0 4rem;
		&::before {
			border-top: 1px solid #ebedf0;
			position: absolute;
			box-sizing: border-box;
			content: " ";
			pointer-events: none;
			top: -50%;
			right: -50%;
			bottom: -50%;
			left: -50%;
			transform: scale(0.5);
			z-index: 10;
		}
	}
}

.item-con {
	align-items: center;
	padding-bottom: 0.1rem;
	border-bottom: 1px solid #dfdfdf;
	.icon {
		color: #999;
	}
}
.submit {
	position: fixed;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0.2rem 0.3rem;
	background: #fff;
	box-shadow: 0 -0.04rem 0.1rem 0.01rem rgba(206, 206, 206, 0.2);
	.el-button {
		width: 100%;
		height: 0.7rem;
		font-size: 0.28rem;
	}
}
</style>
